<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>在线管理</title>
<link rel="stylesheet" href="{__PUBLIC_PATH}/common/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="{__PUBLIC_PATH}/common/plugins/ztree/css/iframe.css">
<script src="{__PUBLIC_PATH}/common/js/jquery.min.js"></script>
<script src="{__PUBLIC_PATH}/common/plugins/ztree/js/jquery.ztree.core.min.js"></script>
<script src="{__PUBLIC_PATH}/common/js/admin_jquery.layout-latest.min.js"></script>
<script src="{__PUBLIC_PATH}/common/plugins/layer/layer.js"></script>
<style type="text/css">
    .ui-layout-center ul{padding-left:10px;}
    .tabs li{list-style:none;}
    .ztree li{line-height:22px;}
    .ztree .node_name{font-size:13px !important;}
    .hover{line-height:22px;}
    #saveBtn{display: inline-block;padding:0 18px;height:40px;line-height:40px;cursor:pointer;text-align:center;background:#fff;border:1px solid #CFCFCF;border-radius:3px;color:#565656;font-size:14px;}
    #saveBtn:hover{background:#1890ff;color:#fff;}
</style>
</head>
<body>
<div class="ui-layout-west area manage-area" id="manage_area">
    <div id="tree" class="ztree"></div>
</div>
<div class="ui-layout-center">
    <ul class="tabs"><li id="saveBtn">确定使用</li></ul>
    <iframe name="content_body" id="content_body" src="{:url('/ueditor/get_images_path',['num'=>$info['num'],'func'=>$info['func']])}" width="100%" height="100%" frameborder="0" style="margin-bottom:50px;"></iframe>
</div>
<script type="text/javascript">
    var myLayout;
    jQuery(document).ready(function () {
        myLayout = jQuery("body").layout({
            /*  全局配置 */
            closable:                   true,   /* 是否显示点击关闭隐藏按钮*/
            resizable:                  true,    /* 是否允许拉动*/
            maskContents:               true,   /* 加入此参数，框架内容页就可以拖动了*/
            /*  顶部配置 */
            north__spacing_open:        0,     /* 顶部边框大小*/
            /*  底部配置 */
            south__spacing_open:        0,        /* 底部边框大小*/
            /*  some pane-size settings*/
            west__minSize:              200,     /*左侧最小宽度*/
            west__maxSize:              500,     /*左侧最大宽度*/
            /*  左侧配置 */
            west__slidable:             false,
            west__animatePaneSizing:    false,
            west__fxSpeed_size:         "slow",  /* 'fast' animation when resizing west-pane*/
            west__fxSpeed_open:         1000,    /* 1-second animation when opening west-pane*/
            west__fxSettings_open:      { easing: "easeOutBounce" }, // 'bounce' effect when opening*/
            west__fxName_close:         "none",  /* NO animation when closing west-pane*/
            stateManagement__enabled:   false,   /*是否读取cookies*/
            showDebugMessages:          false 
        }); 
    });
    var zNodes = {$zNodes|raw};
    var setting = {
        view:{
            dblClickExpand:false,showLine:true
        },
        data:{
            simpleData:{enable:true}
        },
        callback:{
            beforeExpand:beforeExpand,onExpand:onExpand,onClick:onClick
        }
    };
    var curExpandNode=null;
    function beforeExpand(treeId,treeNode) {
        var pNode=curExpandNode?curExpandNode.getParentNode():null;
        var treeNodeP=treeNode.parentTId?treeNode.getParentNode():null;
        var zTree=$.fn.zTree.getZTreeObj("tree");
        for(var i=0,l=!treeNodeP?0:treeNodeP.children.length;i<l; i++){
            if(treeNode!==treeNodeP.children[i]){zTree.expandNode(treeNodeP.children[i],false);}
        };
        while (pNode){
            if(pNode===treeNode){break;}
            pNode=pNode.getParentNode();
        };
        if(!pNode){singlePath(treeNode);}
    };
    function singlePath(newNode) {
        if (newNode === curExpandNode) return;
        if (curExpandNode && curExpandNode.open==true) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            if (newNode.parentTId === curExpandNode.parentTId) {
                zTree.expandNode(curExpandNode, false);
            } else {
                var newParents = [];
                while (newNode) {
                    newNode = newNode.getParentNode();
                    if (newNode === curExpandNode) {
                        newParents = null;
                        break;
                    } else if (newNode) {
                        newParents.push(newNode);
                    }
                }
                if (newParents!=null) {
                    var oldNode = curExpandNode;
                    var oldParents = [];
                    while (oldNode) {
                        oldNode = oldNode.getParentNode();
                        if (oldNode) {
                            oldParents.push(oldNode);
                        }
                    }
                    if (newParents.length>0) {
                        zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                    } else {
                        zTree.expandNode(oldParents[oldParents.length-1], false);
                    }
                }
            }
        }
        curExpandNode = newNode;
    };
    function onExpand(event,treeId,treeNode){curExpandNode=treeNode;};
    function onClick(e,treeId,treeNode){
        var zTree=$.fn.zTree.getZTreeObj("tree");
        zTree.expandNode(treeNode,null,null,null,true);
    }
    $(function(){
        $.fn.zTree.init($("#tree"),setting,zNodes);
        $(".ui-layout-north li:first-child").click();
    });
    
    // 点击确认使用
    $("#saveBtn").click(function(){
        var frm = $("#content_body").contents();
        // 将选中的图片拼装数组
        var images_array = [];
        frm.find("#list li").each(function(){
            var val = $(this).attr("data-url");
            if($(this).hasClass("selected")){
                images_array.push(val);
            }
        });
        // 若未选择图片就点确认则提示
        if (!images_array.length) {
            layer.msg('请选择图片', {icon: 2,time: 1000});
            return false;
        }
        $.ajax({
            type:'POST',
            url:"{:url('/ueditor/update_pic')}",
            data:{images_array:images_array},
        });
        if('' != callback && 'index.php' != callback){
            var str = "{$info.func}";
            var info = str.replace('.', '');
            function info_call_back(pathObj){}            
        }
        // 调用父级方法，传入图片数据
        var callback = "{$info.func}";
        var inputId = "{$info.inputId|default=''}";
        var num = {$info.num|default=1};
        if(num > 0){
            if ('' != callback && 'index.php' != callback && num > 1) {
                eval('window.parent.'+callback+'(images_array)');
            } else if (num == 1 && undefined != images_array[0]) {
                $('#'+inputId, window.parent.document).val(images_array[0]);
                $('#img_'+inputId, window.parent.document).attr('src',images_array[0]);
            }
            window.parent.layer.closeAll();
        }
    });
</script>
</body>
</html>